<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>03jQuery核心函数</title>
    <script src="./js/jquery-3.6.0.js"></script>
    <script>
        // $ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$()就是调用$这个函数
        // 1、传入参数为 [ 函数 ] 时：
        //      表示页面加载完成之后。相当于 window.onload = function(){}
        // 2、传入参数为 [ 选择器字符串 ] 时：
        //      $(“#id 属性值”); id 选择器，根据 id 查询标签对象,是jQuery对象
        //      $(“标签名”); 标签名选择器，根据指定的标签名查询标签对象,是jQuery对象
        //      $(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象,是jQuery对象
        // 3、传入参数为 [ HTML 字符串 ] 时：
        //      会对我们创建这个 html 标签对象，是jQuery对象
        // 4、传入参数为 [ DOM 对象 ] 时：
        //      会把这个 dom 对象转换为 jQuery 对象

        $(function () {                         // 1、传入参数为 [ 函数 ] 时：表示页面加载完成 之后，相当 window.onload =
            var $btnObj = $("button");          // 2、传入参数为 [ 选择器字符串 ] 时,表示查询标签对象，是jQuery对象
            // alert($btnObj);                  // [object Object]
            // alert($btnObj.length);           // 2
            $btnObj.click(function () {         // 绑定单击事件
                alert("jQuery 的单击事件");
            });

            var $divObj = $("<div>传入标签</div>");  // 3、传入参数为 [ HTML 字符串 ] 时：会对我们创建这个 html 标签对象，是jQuery对象
            // alert($divObj);                     // [object Object]
            $divObj.appendTo("body");

            let btn = document.getElementById("btn01");
            // alert(btn);                      // [object HTMLButtonElement]
            let btn2 = $(btn);                  // 4、传入参数为 [ DOM 对象 ] 时：会把这个 dom 对象转换为 jQuery 对象
            // alert(btn2);                     // [object Object]
        });
        // 等价于 ↓
        $(document).ready(function () {
        });
    </script>
</head>
<body>

<button id="btn01">SayHello</button>
<button>SayHello</button>
</body>
</html>